<template>
    <el-row class="container1">
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="65px" label-position="right" class="login-container">
        <h3 class="title">系统注册</h3>
        <el-form-item label="角色" prop="role_type">
            <el-radio-group v-model="ruleForm2.role_type">
                <el-radio-button  class="radio" :label="3">生产员</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="ruleForm2.sex">
                <el-radio class="radio" :label="1">男</el-radio>
                <el-radio class="radio" :label="2">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="姓名" prop="truename">
            <el-input type="text" v-model="ruleForm2.truename" auto-complete="off" placeholder="真实姓名"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="mobile">
            <el-input type="text" v-model="ruleForm2.mobile" auto-complete="off" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="设置密码"></el-input>
        </el-form-item>
        <el-form-item label="邀请码" prop="code">
            <el-input type="text" v-model="ruleForm2.code" auto-complete="off" placeholder="邀请码"></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="sms">
            <div style="display: flex">
                <el-input type="text" v-model="ruleForm2.sms" auto-complete="off" placeholder="验证码"></el-input>
                <el-button>
                    <span @click="sendCms" v-show="!djsStart">发送验证码</span>
                    <span v-show="djsStart">{{sec}} s</span>
                </el-button>
            </div>

        </el-form-item>

        <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">确认注册
            </el-button>
            <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
        </el-form-item>
    </el-form>
    </el-row>
</template>



<script>
    import { register } from '../api/api';
    import axios from 'axios'

    //import NProgress from 'nprogress'
    export default {
        data() {
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^1[1|2|3|4|5|6|7|8|9][0-9]\d{8}$/
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };

            return {
                djsStart: false,
                sec: 60,
                djs:"获取短信验证码",

                logining: false,
                ruleForm2: {
                    sms:'',
                    code:'',
                    mobile: '',
                    password: '',
                    sex: '',
                    role_type: 3,
                    truename: '',
                },
                rules2: {
                    sex: [
                        {required: true, message: '请选择性别'},
                        //{ validator: validaePass }
                    ],
                    role_type: [
                        {required: true, message: '请选择角色'},
                        //{ validator: validaePass }
                    ],
                    truename: [
                        {required: true, message: '请输入姓名'},
                        //{ validator: validaePass }
                    ],
                    code: [
                        {required: true, message: '请输入邀请码'},
                        //{ validator: validaePass }
                    ],
                    sms: [
                        {required: true, message: '请输入验证码'},
                        //{ validator: validaePass }
                    ],
                    mobile: [
                        {required: true, message: '请输入手机号'},
                        { validator: checkPhone }
                    ],
                    password: [
                        {required: true, message: '请设置密码'},
                        //{ validator: validaePass2 }
                    ]
                },
                checked: true
            };
        },
        methods: {
            sendCms(){
                var _self = this;
                // 验证手机号，
                let reg = /^1[2|3|4|5|6|7|8|9][0-9]\d{8}$/
                let flag = reg.test(this.ruleForm2.mobile);
                if (!flag) {
                    this.$message({
                        message: '手机号错误',
                        type: 'error'
                    });
                    return false;
                } else {
                    axios.get(
                            this.hosts+"/api/sendSms?mobile="+this.ruleForm2.mobile,
                        )
                        .then(res => {
                            if(res.data.code != 200){
                                this.$message({
                                    message: res.data.msg?res.data.msg:'发送失败',
                                    type: 'error'
                                });
                            }else{
                                _self.djsStart = true;
                                let secIntv = setInterval(function() {
                                    (_self.sec) --;
                                    if (_self.sec < 1) {
                                        _self.djsStart = false;
                                        _self.sec = 60;
                                        clearInterval(secIntv);
                                    }
                                }, 1000)

                            }
                        });

                }
            },
            handleReset2() {
                this.$refs.ruleForm2.resetFields();
            },
            handleSubmit2(ev) {
                var _this = this;
                this.$refs.ruleForm2.validate((valid) => {
                    if (valid) {
                        //_this.$router.replace('/table');
                        this.logining = true;
                        //NProgress.start();
                        let para = Object.assign({}, this.ruleForm2);
                        register(para).then(data => {
                            this.logining = false;
                            //NProgress.done();
                            let { msg, code, datas } = data;
                            if (code !== 200) {
                                this.$message({
                                    message: msg?msg:'注册失败',
                                    type: 'error'
                                });
                            } else {
                                this.$message({
                                    message: '注册成功',
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    _this.$router.push({ path: '/login' });
                                },1000)

                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    }

</script>

<style lang="scss" scoped>
    .container1{
        background: url(../assets/bg1.jpg) center !important ;
        background-size: cover;
        position: absolute;
        top: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;
    }
    .login-container {
        /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;

        .title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: #505458;
        }

        .remember {
            margin: 0px 0px 35px 0px;
        }
    }
</style>